import theme, { type Variants } from "@/common/theme";
import Panel from "@/components/Panel";

const variants: (keyof Variants)[] = ["primary", "danger"];

export default function Panels() {
  return (
    <Panel title="Panels" className="bg-white">
      <div className="flex gap-4">
        <Panel title={<h2>Default</h2>} className="flex-1">
          Default
          <br />
          Default
        </Panel>
        {variants.map((variant) => (
          <Panel
            key={variant}
            title={variant}
            className={["flex-1", theme[variant].borderColor]}
            titleClassName={[theme[variant].bg, theme[variant].textColor]}
            bodyClassName="bg-gray-100"
          >
            {variant}
            <br />
            {variant}
          </Panel>
        ))}
      </div>
    </Panel>
  );
}
